import React from 'react';
import { Input, Button, List } from 'antd';

//无状态组件，性能要比class要高，用于只有render函数的时候（或者只有一点逻辑处理的时候）
const TodoListUI = (props) => {
  return (
      <div style={{marginTop: '10px', marginLeft: '10px'}}>
        <Input
          placeholder='auto'
          style={{width: '200px', marginRight: '10px'}}
          onChange={props.handleInputChange}
          value={props.inputValue}
        />
        <Button type="primary" onClick={props.handleBtnClick}>提交</Button>
        <List
          style={{marginTop: '10px', width: '350px'}}
          header={<div>Header</div>}
          footer={<div>Footer</div>}
          bordered
          dataSource={props.list}
          renderItem={(item, index) => (<List.Item onClick={() => (props.handleItemDelete(index))}>{item}</List.Item>)}
        />
      </div>
    )
}

// class TodoListUI extends Component {
// 	render() {
//     return (
//       <div style={{marginTop: '10px', marginLeft: '10px'}}>
//         <Input
//           placeholder='auto'
//           style={{width: '200px', marginRight: '10px'}}
//           onChange={this.props.handleInputChange}
//           value={this.props.inputValue}
//         />
//         <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
//         <List
//           style={{marginTop: '10px', width: '350px'}}
//           header={<div>Header</div>}
//           footer={<div>Footer</div>}
//           bordered
//           dataSource={this.props.list}
//           renderItem={(item, index) => (<List.Item onClick={(index) => (this.handleItemDelete(index))}>{item}</List.Item>)}
//     />
//       </div>
//     )
//   }
// }

export default TodoListUI;